.course-detail-page {
  .course-header {
    margin-bottom: 24px;

    .course-cover {
      position: relative;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

      img {
        width: 100%;
        height: 300px;
        object-fit: cover;
      }

      .course-overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.4);
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transition: opacity 0.3s;

        .anticon {
          font-size: 48px;
          color: #fff;
        }
      }

      &:hover .course-overlay {
        opacity: 1;
      }
    }

    .course-info {
      h1 {
        font-size: 28px;
        font-weight: 700;
        color: #333;
        margin-bottom: 16px;
      }

      .course-description {
        color: #666;
        font-size: 16px;
        line-height: 1.6;
        margin-bottom: 24px;
      }

      .course-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 16px;
        margin-bottom: 24px;

        .meta-item {
          display: flex;
          align-items: center;
          gap: 8px;
          color: #666;
          font-size: 14px;

          .anticon {
            color: #999;
          }
        }
      }

      .course-tags {
        margin-bottom: 24px;

        .ant-tag {
          margin-bottom: 8px;
        }
      }

      .course-price {
        margin-bottom: 24px;

        .current-price {
          font-size: 32px;
          font-weight: 700;
          color: #f5222d;
          margin-right: 12px;
        }

        .original-price {
          font-size: 18px;
          color: #999;
          text-decoration: line-through;
        }
      }

      .course-actions {
        display: flex;
        gap: 12px;
        flex-wrap: wrap;

        .ant-btn {
          height: 48px;
          padding: 0 24px;
          font-size: 16px;
          border-radius: 8px;
        }
      }
    }
  }

  .course-content {
    .ant-tabs-tab {
      font-size: 16px;
      font-weight: 500;
    }

    .course-overview {
      h3 {
        font-size: 18px;
        font-weight: 600;
        color: #333;
        margin: 24px 0 12px;

        &:first-child {
          margin-top: 0;
        }
      }

      p {
        color: #666;
        line-height: 1.6;
        margin-bottom: 16px;
      }

      ul {
        color: #666;
        line-height: 1.6;
        padding-left: 20px;
      }
    }

    .course-outline {
      .lesson-number {
        width: 32px;
        height: 32px;
        background: #1890ff;
        color: #fff;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 600;
      }

      .ant-list-item-meta-title {
        font-weight: 500;
      }

      .ant-list-item-meta-description {
        display: flex;
        align-items: center;
        gap: 12px;
        color: #666;
      }
    }

    .course-reviews {
      .reviews-summary {
        margin-bottom: 24px;
        padding: 24px;
        background: #f8f9fa;
        border-radius: 8px;

        .rating-overview {
          .average-rating {
            display: flex;
            align-items: center;
            gap: 12px;

            .rating-score {
              font-size: 32px;
              font-weight: 700;
              color: #1890ff;
            }

            .rating-count {
              color: #666;
              font-size: 14px;
            }
          }
        }
      }

      .ant-list-item-meta-title {
        display: flex;
        align-items: center;
        gap: 12px;
        font-weight: 500;
      }

      .ant-list-item-meta-description {
        p {
          color: #666;
          line-height: 1.6;
          margin-bottom: 8px;
        }

        .review-time {
          color: #999;
          font-size: 12px;
        }
      }
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .course-detail-page {
    .course-header {
      .course-cover {
        img {
          height: 200px;
        }
      }

      .course-info {
        h1 {
          font-size: 24px;
        }

        .course-meta {
          gap: 12px;

          .meta-item {
            font-size: 12px;
          }
        }

        .course-price {
          .current-price {
            font-size: 24px;
          }
        }

        .course-actions {
          flex-direction: column;

          .ant-btn {
            width: 100%;
          }
        }
      }
    }
  }
} 